// out: ../css/

// 导入初始化样式
@import 'base.less';

@mainColor: #fb7299;
@ratio: 3.75;

// 头部
.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: (84vw / @ratio);
    background-color: #fff;

    // 默认值0，后来者居上，取值是整数， 取值越大，显示顺序越靠上
    z-index: 1;


    // navbar
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: (44vw / @ratio);
        padding: 0 (12vw / @ratio) 0 (18vw / @ratio);
        // background-color: #ccc;

        // left
        .left {
            .Navbar_logo {
                font-size: (28vw / @ratio);
                color: @mainColor;
            }
        }

        // right
        .right {
            display: flex;
            align-items: center;
            .ic_search_tab {
                font-size: (22vw / @ratio);
                color: #ccc;
            }

            // 登录
            .login {
                width: (24vw / @ratio);
                height: (24vw / @ratio);
                margin-left: (24vw / @ratio);
            }

            // 下载
            .download {
                width: (72vw / @ratio);
                height: (24vw / @ratio);
                margin-left: (24vw/ @ratio);
            }
        }
    }

    // 菜单 menu
    .menu {
        position: relative;
        height: (39vw / @ratio);
        padding-right: (40vw / @ratio);
        border-bottom: 1px solid #eee;
        overflow: hidden;

        .tab {
            ul {
                display: flex;
                li {
                    padding: 0 (16vw / @ratio);

                    a {
                        display: block;
                        height: (38vw / @ratio);
                        line-height: (38vw / @ratio);
                        font-size: (14vw / @ratio);
                        border-bottom: 2px solid transparent;
                        
                    }
                    &.active {
                        a {
                            color: @mainColor;
                            border-bottom-color: @mainColor;
                        }
                    }
                }
            }
        }

        .more {
            position: absolute;
            right: 0;
            top: 0;
            width: (40vw / @ratio);
            height: (40vw / @ratio);
            // background-color: pink;
            text-align: center;
            line-height: (40vw / @ratio);
            color: #ccc;
            i {
                font-size: (20vw / @ratio);
            }
        }
    }


}

// 内容
.main {
    padding: (84vw / @ratio) (5vw/@ratio) 0;

    .video-list {
        display: flex;
        flex-wrap: wrap;
        font-size: (12vw / @ratio);

        .video-item {
            width: 50%;
            padding: (8vw / @ratio) (5vw / @ratio);

            .card {
                position: relative;

                .count {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    padding: (8vw / @ratio);
                    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
                    color: #fff;

                    i {
                        vertical-align: middle;
                    }
                }
            }
            .title {
                margin-top: (6vw / @ratio);
            }
        }
    }
}

// 打开按钮
.btn {
    position: fixed;
    left: 0;
    bottom: (30vw / @ratio);
    width: 100%;
    height: (36vw / @ratio);
    padding: (12vw / @ratio);

    a {
        display: block;
        height: (36vw / @ratio);
        background-color: @mainColor;
        border-radius: (18vw / @ratio);
        text-align: center;
        line-height: (36vw / @ratio);
        color: #fff;
        box-shadow: 0 0 (12vw / @ratio) rgba(0,0,0,0.2);

        span {
            font-size: (14vw / @ratio);
        }
    }
}


